<template>
	<view>
		<u-navbar :title="navTitle" :autoBack="true" :placeholder="true" leftIconColor="#ffffff"
			:titleStyle="{color: '#ffffff'}" bgColor="#e60000">
		</u-navbar>
		<view class="padding">
			<view class="card-item" v-for="(item,index) in bankCardList" :key="index"
				@click="cardClickHandle(index,item)">
				<view class="flex justify-between w-100">
					<view class="flex-grow">
						<view class="text-bold">{{item.realName}}</view>
						<view class="text-bold">{{item.bankName}}</view>
						<view class="font-12 padding-tb-xs">{{item.bankBranch}}</view>
						<view class="margin-top-xs">{{ interceptedBankCard(item.bankAccount) }}</view>
					</view>
				</view>
			</view>
			<view class="add-bank" @click="editCard">
				添加银行卡
			</view>
		</view>
	</view>
</template>

<script>
	import {
		bankList
	} from '@/common/api/bank.js'
	export default {
		data() {
			return {
				showModal: false,
				showTips: false,
				modalTips: '',
				modalTitle: '确认解绑',
				modalContent: '',
				navTitle: '我的银行卡',
				bankCardList: [],
				isSelect: false, // 为true选中银行卡并返回
				cardProceeds: '',
				selectCardInfo: {},
				isClickConfirm: true
			};
		},
		onLoad(options) {
			if (options.isSelect) {
				this.isSelect = options.isSelect
				this.navTitle = '选择银行卡'
			}
		},
		onShow() {
			this.bankCardList = []
			this.getBankCardList()
		},
		methods: {
			getBankCardList() {
				bankList().then(res => {
					if (res.code == 200) {
						this.bankCardList = res.data || []
					}
				})
			},
			editCard() {
				uni.navigateTo({
					url: '/pages/my/bankCard/bankCardEdit'
				})
			},
			// 银行卡间隔
			interceptedBankCard(value) {
				if (!value) {
					return
				}
				return value.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, "$1 ");
			},
			// 银行卡被点击
			cardClickHandle(index, item) {

                if(item.adddata1 == null){
                    uni.showModal({
                        title: '请先编辑银行卡',
                        showCancel: false,
                        confirmText: '去编辑',
                        success: function() {
                            let info = encodeURIComponent(JSON.stringify(item))
                            uni.navigateTo({
                                url: '/pages/my/bankCard/bankCardEdit?info=' + info
                            })
                        }
                    })
                }else {

                    if (this.isSelect) {
                        uni.$emit('setSelectBankCard', item)
                        uni.navigateBack()
                    }

                }



			},
		}
	}
</script>

<style lang="scss" scoped>
	.add-bank {
		width: 612rpx;
		height: 88rpx;
		background: #E60000;
		border-radius: 50rpx;
		font-size: 36rpx;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		margin-top: 80rpx;
	}

	.card-item {
		background: linear-gradient(-34deg, rgb(254, 118, 101), rgb(254, 82, 98));
		padding: 30rpx;
		border-radius: 14rpx;
		color: #ffffff;
		font-size: 30rpx;
		margin-bottom: 30rpx;
	}
</style>
